PBA INSTITUTE

Navigation IN HTML

The <nav> tag in HTML is a semantic element used to define a navigation section within a webpage. It encapsulates links to various pages or sections of a website, providing a clear structure for navigation menus. By using the <nav> tag, developers enhance the accessibility and readability of their code, facilitating easier navigation for users and assisting search engines in understanding the content's context.

Example :

													
													
<!DOCTYPE html>
<html>
<body>
<nav>
<a href="#">HTML</a> |
<a href="#">CSS</a> |
<a href="#">JavaScript</a> |
<a href="#">jQuery</a>
</nav>
</body>
</html>
													
													
												

Output :

Example-2

													
													
<!DOCTYPE html>
<html>
<head>
  <title></title>
  <style type="text/css">
  	.exp2 {
  		color: none;
	}
  	.exp2:hover {
  		text-decoration: underline;
  	}
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#" class="exp2">Home</a></li>
      <li><a href="#" class="exp2">About</a></li>
      <li><a href="#" class="exp2">Services</a></li>
      <li><a href="#" class="exp2">Contact</a></li>
    </ul>
  </nav>
</body>
</html>
													
													
												

Output :

Example-3

													
													

<!DOCTYPE html>
<html>
<head>
  <style>
  	.cla{
  		color: none;
  	}
    .cla:hover {
    	background: tomato;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</body>
</html>
</html>
													
													
												

Output :

Conclusion :

In HTML, the navigation tag <nav> serves as a semantic container for navigation links within a webpage. It enhances accessibility and provides clarity to the structure of the document. Enclosing menus, links, or navigation-related content within <nav> aids in distinguishing navigational elements from other page components. Utilizing <nav> promotes better organization and understanding of a webpage's layout, contributing to improved user experience and search engine optimization.

Navigation IN HTML

Example :

Conclusion :

HTML All Topics

SHARE